<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-02-06 14:15:12
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-13 11:31:23
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\manager\layout.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEaboutUs
-->
<template>
  <div>
    <a-layout style="min-height: 100vh">
      <a-layout-sider v-model:collapsed="collapsed" collapsible>
        <!-- <img src="../../imgs/logo.png" class="logo" @click="handleHome" /> -->
        <div class="logo">
          <div class="title" @click="handleHome">
            <span class="txt">悦猫圈</span>
          </div>
        </div>

        <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="inline"
          @click="handleClick"
          :items="items"
        >
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0" />
        <a-layout-content style="margin: 0 16px">
          <a-breadcrumb style="margin: 16px" separator=">">
            <a-breadcrumb-item
              v-for="(item, index) in $route.matched"
              :key="index"
              :to="{ path: item.path }"
              style="cursor: pointer"
            >
              {{ item.meta.title }}
            </a-breadcrumb-item>
          </a-breadcrumb>
          <div
            :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"
          >
            <!-- 内容 -->
            <router-view></router-view>
          </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          yuemaoquan ©2023 Created by dadui
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<script setup>
import { reactive, ref, h } from "vue";
import {
  MailOutlined,
  UserOutlined,
  ContactsOutlined,
  SettingOutlined,
  DiffOutlined,
  InboxOutlined,
  HomeOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const selectedKeys = ref([router.currentRoute._value.path]);
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}

const items = reactive([
  getItem("首页", "/manager/managerDefault", () => h(HomeOutlined)),
  getItem("用户管理", "/manager/userManage", () => h(UserOutlined)),
  getItem("领养信息", "/manager/adaptMsg", () => h(ContactsOutlined)),
  getItem("领养申请", "/manager/application", () => h(DiffOutlined)),
  getItem("动物管理", "/manager/animalManager", () => h(InboxOutlined)),
  getItem("通知管理", "/manager/notice", () => h(SettingOutlined)),

  getItem("通知管理", "1", () => h(SettingOutlined), [
    getItem("领养须知", "/manager/adoptionNotice", () => h(MailOutlined)),
    getItem("最新消息", "/manager/latestNews", () => h(MailOutlined)),
    getItem("小常识", "/manager/smallKnowns", () => h(MailOutlined)),
    getItem("关于我们", "/manager/aboutUs", () => h(MailOutlined)),
  ]),
]);
const handleClick = (e) => {
  console.log("click", e);

  if (e.key === "/manager/managerDefault") {
    router.push({ name: "managerDefault" });
  } else if (e.key === "/manager/userManage") {
    router.push({ name: "userManage" });
  } else if (e.key === "/manager/adaptMsg") {
    router.push({ name: "adaptMsg" });
  } else if (e.key === "/manager/application") {
    router.push({ name: "application" });
  } else if (e.key === "/manager/animalManager") {
    router.push({ name: "animalManager" });
  } else if (e.key === "/manager/notice") {
    router.push({ name: "notice" });
  }
};
const handleHome = () => {
  router.push({ name: "homeDefault" });
};
</script>
<style scoped>
.logo {
  /* height: 32px;
  background: rgba(255, 255, 255, 0.3);
  height: 70px;
  padding: 16px; */
}
.logo .title {
  position: relative;
  left: 15%;
  font-size: 35px;
  color: transparent;
  background-color: #333333;
  text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
    rgba(255, 255, 255, 0.2) 1px 3px 3px;
  -webkit-background-clip: text;
  cursor: default;
  .txt {
    font-size: 35px;
    color: transparent;
    background-color: #ff6347;
    text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
      rgba(255, 255, 255, 0.2) 1px 3px 3px;
    -webkit-background-clip: text;
  }
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
</style>
